<template>
    <page>
        <roll class="fit">
            <!-- 储值卡列表 begin -->
            <template v-if="list.length">
                <router-link :to="{name: 'petCard_detail', query: {stupidId: i.id,code: i.cardCode, shopId: i.shopId}}"
                             tag="div" class="card corner f16 white of pb4" v-for="(i, index) in list" :key="index">
                    <div flex="cross:center" class="mt20">
                <span class="card-logo">
                     <img class="arc bg2"/>
                </span>
                        <p>{{i.shopName}}</p>
                    </div>
                    <p class="mt30 card-number">卡号&nbsp;&nbsp;&nbsp;&nbsp;{{i.cardCode}}</p>
                </router-link>


                <!-- 添加储值卡 begin -->
                <router-link :to="{name: 'petCard_bind'}"
                             class="card card-add corner f16 of pb4 text3 mb50" v-if="list.length"
                             flex="main:center cross:center">
                    <i class="iconfont icon-jiahao f22 mr8"></i>
                    <p class="f18">添加储值卡</p>
                </router-link>
                <!-- 添加储值卡 end -->
                <div class="mb50"></div>
            </template>

            <!-- 储值卡列表 end -->


            <!-- 没有储值卡 begin-->
            <div class="fit px12 tc no-card white-bg" v-if="!list.length">
                <img src="./card.png"/>
                <p class="f16 text2 mt20">您还没有储值卡</p>
                <router-link :to="{name: 'petCard_bind'}">
                    <m-button class="btn">添加</m-button>
                </router-link>
            </div>
            <!-- 没有储值卡 end-->
        </roll>
    </page>
</template>
<script>
  export default {
    data () {
      return {
        list: []
      }
    },
    async activated () {
      this.getList()
    },
    computed: {},
    methods: {
      async PitsPullData () {

      },
      PitsPushData () {},
      async getList () {
        var r = await this.$get('iccard/getBandCard', {
          mobile: this.$store.getters.userInfo.mobile
        })
        this.list = r.obj || []
      },
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../css/variable';

    .no-card {
        .btn {
            margin-top: 68px;
        }
        img {
            margin-top: 130px;
            width: 124px;
        }
    }

    $card-left-space: 80px;
    .card {
        height: 188px;
        margin: 20px 12px 0;
        background-color: #325daa;
    }

    .card-logo {
        width: $card-left-space;
        text-align: center;
        img {
            width: 44px;
            height: 44px;
        }
    }

    .card-add {
        background-color: transparent;
        border: 4px dotted $c4;
    }

    .card-number {
        padding-left: $card-left-space;
    }
</style>
